<template>
	<view class="order-list-content">
		<view class="" v-if="dataList && dataList.length !== 0">
			<view class="dataList" v-for="(item, index) in dataList" :key="index">
				<view class="dataList_title flexjsbac">
					<view class="box-line"></view>
					<view class="text">修改技师开始时间</view>
				</view>
				<view class="technicianList flex" :class="[currentIndex == tIndex?'technicianList_active':'']"
					v-for="(tItem, tIndex) in item.zyOrderItemList" :key="tIndex" @click="clickItem(tItem, tIndex)">
					<u-checkbox-group>
						<u-checkbox @change="checkboxChange($event, tItem)" v-model="formData[item.key1]"
							v-if="isChecked" size='circle'></u-checkbox>
					</u-checkbox-group>
					<image class="img" mode="aspectFill"
						:src="tItem.technicianAvatar || basImgUrl + 'img_common_tech.png'" alt="" />
					<view class="flex1">
						<view class="flexjsbac technicianName">
							<text>{{ tItem.technicianName }}</text>
							<text>￥{{ tItem.paymentMoney }}</text>
						</view>
						<view class="flexjsbac list_con">
							<view class="flexJcac">
								<u-icon name="order" color="#666666" size="22"></u-icon>
								{{ tItem.itemName}}
							</view>
							<text
								:style="{ 'color': statusConfig[tItem.status].color||statusConfig['default'].color }">{{ statusConfig[tItem.status].title||statusConfig['default'].title }}</text>
						</view>
						<view class="flexjsbac list_con" v-for="(items, indexs) in tItem.zyOrderProductList"
							:key="indexs">
							<view class="flexJcac">
								<u-icon name="bag" color="#666666" size="22"></u-icon>
								{{ items.productName}} x {{ items.productNum }}
							</view>
							<text>￥{{ items.originalPrice }}</text>
						</view>
						<view class="flexjsbac">
							<view class="flexJcac">预约时间: {{ tItem.subscribeStartTime }}</view>
						</view>
					</view>
				</view>
				<view class="give-money" v-if="showDisbursements">
					<!-- <view class="time" v-if="item.orderStatus === 5">订单失效还剩{{ item.countHour }}时{{ item.countMinute }}分{{ item.countSecond }}秒</view> -->
					<view class="actual-money">
						实付款：<text style="color:#FF0000">￥{{ item.actuallyMoney }}</text>
					</view>
					<view v-if="item.isPayment === 1&&item.orderSource===1">倒计时剩余时间: {{ item.countdownSeconds }}</view>
				</view>
				<view class="bottom_con">
					<view style="display: inline-block;" @click.stop="clickSlot(item, slotName)">
						<slot :name="`${slotName}${index}`"></slot>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="common-no-data">
			<image class="no-data-img" :src="baseImgUrl + 'img_no_order.png'" alt="" />
			<view class="text">暂无订单</view>
		</view>
		<view class="dataList">
			<view class="dataList_title flexjsbac">
				<view class="box-line"></view>
				<view class="text">技师忙碌时间</view>
			</view>
			<view style="width: 100%;">
				<view class="row-between" style="padding: 20upx;" v-for="(item, index) in timeList" :key="index">
					<view style="font-size: 30upx;font-weight: 600;">{{ item.busyDate }}</view>
					<view class="row" style="width: 70%;">
						<view style="margin: 0 30upx 0upx 0;" v-for="(items, indexs) in item.busyTime" :key="indexs">
							{{ items }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dataList column-center">
			<view class="dataList_title flexjsbac">
				<view class="box-line"></view>
				<view class="text">请选择服务开始时间</view>
			</view>
			<!-- <view style="width: 100%;height: 160upx;">
				<view class="chooseDate" >选择时间</view>
			</view> -->
			<view v-if="getDate">{{ changeDate }}</view>
			<view class="chooseDate" @click="chooseDate">选择时间</view>
			<u-datetime-picker :show="showDate" v-model="newDate" mode="datetime" :minDate="minDate"
				:visibleItemCount="9" @confirm="confirmDate" @cancel="showDate=false"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import pageConfig from '@/config'
	export default {
		name: 'OrderListComponents',
		props: {
			orderList: {
				type: Array,
				default: []
			},
			Alltime: {
				type: Array,
				default: []
			},
			orderStatus: {
				type: Number,
				default: 0
			},
			showDisbursements: {
				type: Boolean,
				default: true
			},
			showSlotBtn: {
				type: Boolean,
				default: true
			},
			slotName: {
				type: String,
				default: 'btn'
			},
			isChecked: {
				type: Boolean,
				default: false
			},
			notClick: {
				type: Boolean,
				default: false
			},
			showRefund: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			orderList: {
				handler(newVal, oldVal) {
					this.dataList = newVal
				},
				deep: true
			},
			Alltime: {
				handler(newVal, oldVal) {
					this.timeList = newVal
				},
				deep: true
			},
		},

		data() {
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				showDate: false,
				getDate: false,
				newDate: '',
				changeDate: '',
				currentIndex: 0,
				minDate: new Date().getTime(),
				statusConfig: {
					0: {
						title: '待支付',
						color: '#C27E15'
					},
					1: {
						title: '待服务',
						color: '#C27E15'
					},
					2: {
						title: '服务中',
						color: '#FF0000'
					},
					3: {
						title: '待评价',
						color: '#FF0000'
					},
					4: {
						title: '已完成',
						color: '#FF0000'
					},
					5: {
						title: '已退单',
						color: '#FF0000'
					},
					'default': {
						title: '--',
						color: '#666999'
					},
				},
				formData: [],
				dataList: [],
				timeList: []
			}
		},
		created() {
			this.dataList = this.orderList
			this.timeList = this.Alltime
		},
		mounted() {
			if (this.orderStatus == 0) {
				this.startCountdown()
			}
		},
		methods: {
			confirmDate(value) {
				this.showDate = false
				this.getDate = true
				// 创建一个新的Date对象
				const date = new Date(value.value);
				// 获取年月日时分秒  
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的  
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const subscribeStartTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				this.changeDate = subscribeStartTime
				console.log('处理的时间', this.changeDate)
				this.$emit('getDate', value)
			},
			chooseDate() {
				this.showDate = true
			},
			startCountdown() {
				this.dataList.forEach(item => {
					if (item.orderSource == 1) {
						const timer = setInterval(() => {
							if (item.countdownSeconds > 0) {
								item.countdownSeconds--
							} else {
								clearInterval(timer)
								this.countdownFinish(item.id, item.isPayment)
							}
						}, 1000)
					}
				})
			},
			countdownFinish(itemId, isPayment) {
				this.$emit('countdownFinished', itemId, isPayment)
				// api_order.orderdelete(itemId).then(res=>{
				// 	// this.dataList = this.orderList
				// })
				// 在这里可以根据ID执行相应的逻辑
			},
			checkboxChange(e, item) {
				if (e) {
					this.formData.push(item)
				} else {
					let el = this.formData.find(itm => itm.id === item.id)
					if (el) this.formData.splice(this.formData.indexOf(el), 1)
				}
			},
			clickItem(item, index) {
				console.log(item, index)
				this.currentIndex = index
				this.$emit('checkItem', item)
				// if (this.notClick) return
				// uni.navigateTo({
				// 	url: `/subPages/order/orderDetail?id=${item.id}`
				// })
			},
			clickSlot(item, slotName) {
				this.$emit('slotClick', item, 'click' + slotName)
			},
			clickOutOrder(item) {
				this.$emit('projectOutOrder', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.technicianList_active {
		border: 1upx solid #c27e15;
	}

	.order-list-content {
		margin: 30rpx;

		.dataList {
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 17rpx;

			.bottom_con {
				display: flex;
				justify-content: flex-end;
				padding: 24rpx;
			}

			.dataList_title {
				position: relative;
				width: 100%;
				font-size: 32rpx;
				font-weight: 600;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: #333333;
				text-align: left;
				vertical-align: top;
				// border-bottom: 1px solid #E6E6E6;
				padding: 24rpx;
				border-radius: 17rpx;

				.box-line {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 15rpx;
					height: 48rpx;
					opacity: 1;
					background: #c27e15;

				}

				.text {
					margin-left: 24rpx;
					font-size: 30rpx;
					font-weight: 600;
					display: flex;
					justify-content: space-between;

					.text-left {
						display: flex;
						align-items: center;

						.name {
							margin-right: 20rpx;
						}

						.room-item {
							margin-left: 20rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #808080;
						}
					}

					.text-right {
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.give-money {
				display: flex;
				justify-content: space-between;
				align-items: center;

				border-bottom: none;
				height: 57rpx;
				padding: 24rpx;
			}

			.technicianList {
				padding: 24rpx;
				// border-bottom: 1px solid #E6E6E6;

				.technicianName {
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 43.44rpx;
					color: #333333;
					text-align: left;
					vertical-align: top;
				}

				.list_con {
					margin: 15rpx 0;
				}

				.img {
					width: 128rpx;
					height: 128rpx;
					margin-right: 24rpx;
				}
			}
		}
	}

	.chooseDate {
		padding: 20upx 60upx;
		border-radius: 10upx;
		color: #fff;
		background-color: #c27e15;
		font-size: 26upx;
		margin: 30upx 0;
	}

	.out-money {
		margin-top: 10rpx;
	}
</style>